<!--
 * @Author: leiming
 * @Date: 2022-09-26 12:39:18
 * @LastEditors: leiming
 * @LastEditTime: 2022-10-20 01:31:55
 * @Description: file content
-->
<template>
    <div class="selectPopUp">
        <el-icon class="close" @click="hide"><Close /></el-icon>
        <div class="remote">
            <!-- <search-input
        ref="searchInput"
        @querySearchAsync="querySearchAsync"
        @selectLocation="selectLocation"
      ></search-input> -->
            <p style="font-size: 14px; color: #333333; margin: 0 0 5px">选择楼盘:</p>
            <el-select v-model="selectCityId" filterable placeholder="请选择">
                <el-option v-for="item in buildings" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <el-button type="primary" style="flot: right" @click="selectLocation"> 定点 </el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SearchPopup',
    components: {},
    props: {
        title: {
            type: String,
            required: true,
        },
        // 所有楼盘点位数据
        buildings: {
            type: Array,
            required: true,
        },
    },
    data() {
        return {
            selectCityId: null,
        };
    },
    mounted() {},
    created() {},
    methods: {
        hide() {
            this.$emit('hide');
        },
        querySearchAsync(queryString) {
            this.$emit('querySearchAsync', queryString);
        },
        clearInput() {
            this.selectCityId = null;
        },
        selectLocation() {
            let val = this.buildings.find((item) => item.id === this.selectCityId);
            let obj = {
                lng: val.positionLng,
                lat: val.positionLat,
            };
            this.$emit('selectLocation', obj);
            // this.hide()
        },
    },
};
</script>

<style lang="scss" scoped>
.selectPopUp {
    width: 320px;
    background: #ffffff;
    padding: 20px;
    line-height: 1.3;
    border-radius: 4px;
    background: #fff;
    .el-select {
        width: 100%;
    }
    .close {
        float: right;
    }
    .el-button {
        margin-top: 20px;
        float: right;
    }
    .remote::after {
        content: '';
        display: block;
        clear: both;
    }
}
</style>
